.slider {
  display:block;
  position: relative;
  overflow: hidden;
}
.slider ul {
  list-style: none;
}
.slider-content {
  float: left;
  width: 100%;
  display: block;
  overflow: auto;
  min-height: 250px;
}
.slider-content ul {
  float: left;
  width: 100%;
  display: block;
  position: relative;
}
.slider-content ul li {
  float: left;
  width: 100%;
}
.slider-content ul ul li a {
  padding: 5px 10px;
  display: block;
  border-bottom: 1px solid #f3f3f3;
  text-transform: capitalize;
}
.slider-content ul ul li a:hover {
  background: #f3faff;
  border-color: #d5ebf9;
}
.slider-content .title {
  padding:0 .28rem;
  background: #ebebeb;
  color: #939393;
   width: 100%;
   float: left;
   text-transform: uppercase;
   box-sizing:border-box;
}
.slider-content .selected .title {
  background: #b9b9b9;
}
.slider .slider-nav {
  height:100%;
  position: fixed;
  right: 0;
  top: .86rem;
  min-height: 250px;
}
.slider .slider-nav ul {
    width:.28rem;
    height:100%;
    padding:.3rem 0;
    display:flex;
    flex-wrap:wrap;
    align-items:space-around;
    justify-content:center;
}
.slider .slider-nav li a {
  padding: 3px 5px;
  line-height: 13px;
  text-align: center;
  color: #222;
  font-weight: bold;
  display: block;
  text-transform: uppercase;
  cursor: pointer; }
.slider #debug {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 5px;
  background: #000;
  color: #fff;
}
